<template>
  <el-dialog
    :title="modalParam.modalTitle"
    :visible.sync="visible"
    width="500px"
    append-to-body
    @close="onClose"
  >
    <!-- 消息详情内容 -->
    <div v-loading="loading">
      <!-- 根据消息类型显示不同的内容 -->
      <div v-if="messageDetail">
        <div class="detail-item">
          <span class="label">发送者：</span>
          <span>{{ messageDetail.senderNickname }}</span>
        </div>
        <div class="detail-item">
          <span class="label">接收者：</span>
          <span>{{ messageDetail.receiverNickname }}</span>
        </div>
        <div class="detail-item">
          <span class="label">消息类型：</span>
          <span>{{ getMessageTypeText(messageDetail.messageType) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">消息内容：</span>
          <div class="content">
            <!-- 根据消息类型显示不同的内容 -->
            <div v-if="messageDetail.messageType === 1">{{ messageDetail.content }}</div>
            <div v-else-if="messageDetail.messageType === 2 || messageDetail.messageType === 23">
              <el-button type="text" @click="playAmrAudio(messageDetail)">播放语音</el-button>
            </div>
            <div v-else-if="messageDetail.messageType === 3 || messageDetail.messageType === 7">
              <el-image
                style="max-width: 100%"
                :src="messageDetail.content"
                :preview-src-list="[messageDetail.content]">
              </el-image>
            </div>
            <div v-else-if="messageDetail.messageType === 6">
              <video
                :src="messageDetail.content"
                controls
                style="max-width: 100%">
              </video>
            </div>
            <div v-else-if="messageDetail.messageType === 5">
              <a :href="messageDetail.content" target="_blank">{{ messageDetail.fileName }}</a>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">发送时间：</span>
          <span>{{ messageDetail.createdAt }}</span>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryMessageById, queryMessageList } from '@/api/chat/message'

export default {
  name: 'MessageManageDetail',
  props: {
    modalParam: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      visible: true,
      loading: false,
      messageDetail: null,// 存储消息详情
      pageData: {
        show: true,
        loading: false,
      },
    }
  },
  mounted() {
    this.getMessageDetail()
  },
  methods: {
    onPlayAmr(url){
      var amr = new BenzAMRRecorder()
      amr.initWithUrl(url).then(function() {
        amr.play()
      })
      amr.onEnded(function() {
        //alert('播放完毕')
      })
    },
    getMessageDetail() {
      if (!this.modalParam.messageId) return
      this.pageData.loading = true;
      // 调用获取消息详情的 API
      queryMessageById(this.modalParam.messageId).then(res => {
        if (res.code === 200) {
          // 更新 messageData，将接口返回的数据保存到 messageData 中
          //this.messageData = res.data.data;

          this.messageDetail = {
            sessionType: res.data._type,
            messageType: res.data._content_type,
            senderNickname: res.data.sender_name,
            receiverNickname: res.data.receiver_name,
            senderId: res.data.sender_uid,
            receiverId: res.data.receiver_uid,
            content: res.data._searchable_key,
            createdAt: res.data._dt,
            fileName:res.data.fileName,
        };
        }
      }).finally(() => {
        this.pageData.loading = false;
      })
    },
    getMessageTypeText(type) {
      // 复用父组件的消息类型转换方法
      switch (type) {
        case 1: return '文本'
        case 2:
        case 23: return '语音'
        case 3:
        case 7: return '图片'
        case 6: return '视频'
        case 5: return '文件'
        default: return '文本'
      }
    },
    //关闭弹窗
    onClose(refresh) {
      this.$emit("close", {refresh: refresh});
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-item {
  margin-bottom: 15px;

  .label {
    font-weight: bold;
    margin-right: 10px;
  }

  .content {
    margin-top: 10px;
  }
}
</style>
